<template>
  <!-- 体格检查情况分析 -->
  <div class="chart" id="main3"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main3"));
      let option = {
        legend: {
          data: ["男", "女"],
          orient: "vertical",
          textStyle: {
            color: "white",
          },
          itemHeight: 10,
          left: 10,
        },
        radar: {
          indicator: [
            { name: "文化素质", max: 6500 },
            { name: "体能", max: 16000 },
            { name: "反应能力", max: 30000 },
            { name: "耐力", max: 38000 },
            { name: "语言能力", max: 52000 },
            { name: "综合潜力", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "男",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "女",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>


<style scoped>
.chart {
  width: 100%;
  height: 90%;
}
</style>